<template>
  <v-container fluid class="custom-container" style="background-color: #f3f7fd" v-touch="{
      left: () => swipe('left'),
      right: () => goBack(),
    }" align="center" justify="center">

    <xy-header-top :title='pageTitle | strAbbr7'>
      <v-btn :ripple="false" icon slot="left" small @click="goBack">
        <v-icon class="white--text">iconfont-icon iconleft</v-icon>
      </v-btn>
    </xy-header-top>
    <v-card flat>
      <div ref="scrollWrapper" style="height: 400px;background-color:#f3f7fd ">
        <v-card-text style="padding: 0;min-height: 540px">

          <v-layout wrap pt-1 style="background-color:#f3f7fd">

            <v-flex xs6 sm6 md6 pa-1 v-for="(item,index) in materialList" :key="index">
              <component v-bind:is="materialCardCmp" :material="item"></component>
            </v-flex>
          </v-layout>

          <xy-scroll-status-bar :scroll-end="scrollEnd" :loading="loading"></xy-scroll-status-bar>
        </v-card-text>
      </div>
    </v-card>

  </v-container>

</template>

<script>
    import {mapGetters} from 'vuex';
    import BScroll from 'better-scroll';
    import MaterialCard from "./card/MaterialCard";
    import InventoryMaterialCard from "./card/InventoryMaterialCard";
    import PrintMaterialCard from "./card/PrintMaterialCard";
    /**
     * 物料列表
     * @author Canaan
     * @date 2019/8/29 16:39.
     */
    export default {
        name: 'materialList',
        mounted() {

            if (!this.$route.query.categoryId) {
                this.$message.warning("分类id为空");
                return;
            }

            this.category = {
                id: this.$route.query.categoryId,
                name: this.$route.query.categoryName,
            };
            this.loadData();

            this.listScroll = new BScroll(this.$refs.scrollWrapper, {
                startY: 0,
                startX: 0,
                scrollY: true,
                scrollX: false,
                scrollbar: false,
                click: true,
                tap: true,
                pullUpLoad: true,
                pullDownRefresh: true
            });

            this.listScroll.on('pullingDown', () => {
                this.reloadData();
            });

            this.listScroll.on('pullingUp', () => {
                this.appendData();
            });

        },
        components: {
            MaterialCard,
            InventoryMaterialCard,
            PrintMaterialCard
        },
        props: {},
        data() {
            return {
                listScroll: null,
                scrollEnd: false,
                loading: false,
                materialList: [],
                pageNo: 1,
                limit: 16,
                category: {
                    id: null,
                    name: null
                }
            }
        },
        computed: {
            ...mapGetters([
                'materialCardCmp',
            ]),
            pageTitle() {
                if (this.category) {
                    return this.category.name || "物料列表";
                }
                return "物料列表";
            }
        },
        methods: {
            swipe(cmd) {

            },
            goBack() {
                this.$router.back();
            },
            appendData() {
                this.pageNo = this.pageNo + 1;
                this.loadData()
                    .then(() => {
                        this.listScroll.refresh();
                        this.listScroll.finishPullUp();
                    });
            },
            reloadData() {
                this.pageNo = 1;
                this.loading = false;
                this.scrollEnd = false;
                this.materialList = [];
                this.loadData()
                    .then(() => {
                        this.listScroll.finishPullDown();
                        this.listScroll.refresh();
                    });
            },
            loadData() {

                if (this.scrollEnd || this.loading) {
                    return new Promise((resolve) => {
                        resolve(null);
                    });
                }

                this.loading = true;

                return this.$ajax.get('material/paging', {
                    params: {
                        categoryId: this.category.id,
                        pageNo: this.pageNo
                    }
                }).then(res => {

                    this.loading = false;
                    if (res.code !== 'ok') {
                        this.$message.error(res.msg);
                        return;
                    }
                    this.scrollEnd = !res.data.rows || res.data.rows.length < this.limit;
                    this.materialList = this.materialList.concat(res.data.rows);
                    return res;
                })

            }

        },
        watch: {},
        filters: {},
        beforeDestroy() {

        }
    }
</script>

<style scoped>

</style>
